<template>
    <div class="hello">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
        <h1>{{test()}}</h1>
        <h1>{{message}}</h1>
        <h1>ok = {{ok? 'YES': 'NO'}}</h1>
        <button @click="reverseMessage">反转消息</button>
        <button @click="addList">添加数组</button>
        <button @click="removeList">删除数组</button>
        <button @click="greet">Greet</button>
        <button @click="counter += 1">加1测试==={{ counter }}</button>
        <a v-on:click.once="doThis">666</a>

        <input v-model="message" placeholder="edit me" type="number" step=10 max=100 min=20>
        <p>Message is: {{ message }}</p>


        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines" cols="150" rows="30"></textarea>


        <div id="example-5">
            <select v-model="selected" multiple style="width: 50px;">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

        <input type="checkbox" v-model="toggle">
        <span>checkbox: {{ toggle }}</span>

        <p v-bind:title="user.name"></p>

        <div v-bind:style="{ color: activeColor, fontSize: fontSize, padding:20 + 'px'}">
            1231236666666
        </div>
        <p class="foo">Hi</p>
        <p v-if="awesome"> awesome</p>
        <p v-else> not awesome</p>
        <p></p>

        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <ul>
            <li v-for="(item, index) in items" v-bind:key="item.message">
                {{ index }} - {{ item.message }}
            </li>
        </ul>

        <ul>
            <li v-for="value in object" v-bind:key="value">
                {{value}}
            </li>
        </ul>

        <p>FFFFFFFFFFFFFFFFFFFF</p>

        <ul>
            <!--            <test_component v-for="item in items"  v-bind:item="item" :key="item"></test_component>-->
<!--            <test_component></test_component>-->
        </ul>

        <p> {{getCurrentTime}} </p>

    </div>
</template>

<script>
    // vue.config.js


    import Vue from 'vue'

    Vue.component("test_component", {
        props: ["item"],
        // template: '<li>{{item}}</li>'
        template: '<li>2343224324</li>'
    })

    // import axios from 'axios'
    export default {
        name: 'hello',
        data() {
            return {
                site: "菜鸟教程",
                url: "www.runoob.com",
                alexa: "10000",
                message: "123456",
                ok: "",
                selected: [],
                counter: 0,
                awesome: false,
                activeColor: "red",
                fontSize: "30px",
                type: "X",
                toggle: true,
                items: [
                    {message: 'Foo'},
                    {message: 'Bar'},
                    {message: 'XXXX'},
                    {message: 'TTTT'}
                ],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                user: {
                    name: "songwei",
                    age: 12,
                    chinese: true
                },

            }
        },
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },
            test: function () {
                // eat(this.site)
                console.log("111")
            },
            reverseMessage: function () {
                this.url = this.url.split('').reverse().join('')
                this.message = this.message.split('').reverse().join('')
            },
            addList: function () {
                this.items.push({message: "Test-" + Date.now()})
            },
            removeList: function () {
                this.items.pop()
            },
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.message + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            },
            doThis: function () {
                alert("111")
            }
        },
        computed: {
            getCurrentTime: function () {
                return Date.now()
            }
        }
        // mounted() {
        //     axios.get("http://172.18.101.51/api/xt/dict/all")
        //         .then(response => (this.url = response.data))
        // }
    }


</script>